<template>
    <el-dialog :visible="visible"
               title="Sparepart Item"
               :show-close="false"
               width="80%"
               top="0px"
    >
        <div class="search">
            <el-input v-model="key" placeholder="Search">
            </el-input>
        </div>
        <el-table
                v-if="partList.length"
                :data="myPart.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                border
                row-key="id"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="partsNumber"
                    label="Part No"
                    width="180"
            >
                <template slot-scope="part">
                    <el-popover title="Part Detail"
                                width="800"
                                placement="right"
                                trigger="hover"
                    >
                        <part-detail :partDetail="partDetail"/>
                        <span slot="reference" style="color:#406EFF" @mouseenter.stop="getPartDetail(part.row)">{{part.row.partsNumber}}</span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="denomination"
                    label="Description"
            >
            </el-table-column>
            <el-table-column
                    prop="designation"
                    label="Description"
            >
            </el-table-column>
            <el-table-column
                    prop="systemName"
                    label="System"
            >
            </el-table-column>
            <el-table-column
                    prop="hostNumber"
                    label="For Unit"
            >
            </el-table-column>
            <el-table-column
                    prop="quantity"
                    label="stock remaining"
                    width="150">
            </el-table-column>
            <el-table-column label="operate">
                <template slot-scope="scope">
                    <el-checkbox @change="f=>statusChange(scope.row,scope.$index,f)"
                                 v-model="scope.row.checked"></el-checkbox>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <el-pagination background
                           :page-size="pageSize"
                           @current-change="changePage"
                           layout="prev, pager, next"
                           :total="myPart.length"></el-pagination>
        </div>

        <span slot="footer" class="dialog-footer">
                        <el-button @click="emit('close')">Cancel</el-button>
                        <el-button type="primary" @click="emit('add')">Add</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex'
    // import {getPartDetail} from "../../api";
    import partDetail from './partDetail'
    import mixins from '../../util/mixins'

    export default {
        name: "spare-part-item",
        mixins:[mixins],
        data() {
            return {
                key: '',
                myPart: [],
                partDetail: {},
                imageList:[],
                id:''
            }
        },

        props: {
            visible: {
                type: Boolean,
                default: false
            }
        },
        created() {
            if (!this.partList.length) {
                this.getPartLists(true)
            } else {
                this.myPart = this.partList
            }

        },
        computed: {
            ...mapGetters(['partList'])
        },
        methods: {
            async getPartDetail(data){
                // if(this.id === id) return;
                // this.id = id;
                // this.clear();
                // let {status,data} = await getPartDetail(id);
                // if(status === 0 ) {
                    this.partDetail = data;

                // }
            },
            clear(){
                this.imageList = [];
                this.partDetail = {}
            },
            statusChange(r, idx, flag) {
                const index = this.partList.findIndex(item=>item.partsNumber===r.partsNumber)
                 this.partList.splice(index, 1, {...r, checked: flag})
            },
            emit(key) {
                if (key === 'close') {
                    this.$emit(key, false)
                } else {
                    const list = [...this.partList];
                    const lists = list.filter(
                        item => item.checked === true
                    );
                    this.$emit(key, lists)
                }
            },
            ...mapActions(['getPartLists'])
        },
        watch: {
            partList(part) {
                this.myPart = part.filter(item => item.partsNumber.toLowerCase().indexOf(this.key.toLowerCase()) > -1)
            },
            visible() {
                this.partList.forEach(item => {
                    item.checked = false
                })
            },
            key(key) {
                this.myPart = this.partList.filter(item => item.partsNumber.toLowerCase().indexOf(key.toLowerCase()) > -1);
            }
        },
        components:{
            partDetail
        }
    }
</script>

<style scoped lang="scss">

</style>